<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>评论</title>

<!-- 评论css -->
<link rel="stylesheet" href="../css/comment.css">
<link rel="stylesheet" href="../css/commentStyle.css">

<!-- 引入Vue -->
<script src="../js/vue.min.js"></script>
<!-- 引入axios -->
<script type="text/javascript"
	src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
</head>
<body style="width: 98%;background-color: #fff;">

<div>
	<!-- 评论 -->
			<!--
			    此评论textarea文本框部分使用的https://github.com/alexdunphy/flexText此插件
			-->
			
			<div class="commentAll">
			    <!--评论区域 begin-->
			    <div class="reviewArea clearfix">
			        <textarea v-model="cn" class="content comment-input" placeholder="Please enter a comment&hellip;" onkeyup="keyUP(this)"></textarea>
			        <a href="javascript:;" class="plBtn" @click="insertComment">评论</a>
			    </div>
			    <!--评论区域 end-->
			    <!--回复区域 begin-->
			   
		       <div class="comment-show" v-for="(c,i) in comment">
						<div class="comment-show-con clearfix">
							<div class="comment-show-con-img pull-left">
								<a :href="'../Mp/index.html?id='+c.id" target="_blank">  <img :src="c.image" alt="头像" style="width: 48px;height: 48px;"></a> 
							</div>
							<div class="comment-show-con-list pull-left clearfix">
								<div class="pl-text clearfix">
									<a href="#" class="comment-size-name">{{c.name}}: </a> <span
										class="my-pl-con">&nbsp;{{c.comment}}</span>
								</div>
								<div class="date-dz">
									<span class="date-dz-left pull-left comment-time">{{c.time}}
										</span>
									<div class="date-dz-right pull-right comment-pl-block">
										<!-- <a href="javascript:;" class="removeBlock" @click="del(c.comment,c.coaccount)">删除</a> <a
											href="javascript:;"
											class="date-dz-pl pl-hf pull-left hf-con-block" @click="hf()">回复</a> <span
											class="pull-left date-dz-line">|</span> --> 
											<a v-show="state== i" href="javascript:;" @click="dz(c.comment,c.coaccount,i)"
											class="date-dz-z pull-left date-dz-z-click"><i class="date-dz-z-click-red red"></i>赞
											(<i class="z-num">{{c.cpraise}}</i>)</a>
											<a v-show="state != i" href="javascript:;" @click="dz(c.comment,c.coaccount,i)"
											class="date-dz-z pull-left"><i class="date-dz-z-click-red" ></i>赞
											(<i class="z-num">{{c.cpraise}}</i>)</a>
									</div>
									<!-- 开始回复 -->
									<!-- <div class="hf-con pull-left" v-show="hf1==2">
										<div class="flex-text-wrap">
											<pre class="pre">
												<span></span><br>
											</pre>
											<textarea class="content comment-input hf-input" :placeholder="'回复@'+c.name"
												></textarea>
										</div>
										<a href="javascript:;" class="hf-pl">评论</a>
									</div> -->
								</div>
								<!-- 回复成功 -->
								<!-- <div class="hf-list-con" style="display: block;" v-show="hf2==2">
									<div class="all-pl-con">
										<div class="pl-text hfpl-text clearfix">
											<a href="#" class="comment-size-name">我的名字 : </a><span
												class="my-pl-con">回复<a href="#" class="atName">@张三
											</a> : zxz
											</span>
										</div>
										<div class="date-dz">
											<span class="date-dz-left pull-left comment-time">2021-5-23
												21:14:59</span>
											<div class="date-dz-right pull-right comment-pl-block">
												<a href="javascript:;" class="removeBlock">删除</a> <a
													href="javascript:;"
													class="date-dz-pl pl-hf hf-con-block pull-left">回复</a> <span
													class="pull-left date-dz-line">|</span> <a
													href="javascript:;" class="date-dz-z pull-left"><i
													class="date-dz-z-click-red"></i>赞 (<i class="z-num">666</i>)</a>
											</div>
										</div>
										开始回复
										<div class="flex-text-wrap" v-show="hf3==2">
											<pre class="pre" style="padding: 6px 15px;">
												<span></span><br>
											</pre>
											<textarea class="content comment-input hf-input" placeholder=""></textarea>
										</div>
									</div>
								</div> -->
		
							</div>
						</div>
					</div>
			   
			    <!--回复区域 end-->
			</div>
			<script type="text/javascript">
				/*js获取父界面的url*/
				function getUrl() {
					
					var url='';
					try { 
					    url = window.top.document.referrer ; 
					} catch(M) { 
					    if (window.parent) { 
					      try { 
					        url = window.parent.document.referrer;
					      } catch(L) { 
					        url = "";
					      } 
					    } 
					} 
					if (url === "") { 
					    url = document.referrer;
					}
					return url;
				}
			
				var v6 = new Vue({
					el : ".commentAll",
					data: function () {
						return {
							cn : "",
							comment : [],
							user : {},
							state : -1,
							/* hf1 : 1,
							hf2 : 1,
							hf3 : 1, */
						}
					},
					created(){
						/*js获取父界面的url start*/
						var url=getUrl();
						//获得文章uaid
						let cuaid = url.replace(/^.*\?uaid=(.+)$/, "$1");
						
						
						var params = new URLSearchParams();
						params.append("cuaid",cuaid);
						//获取comment表数据
						axios.post("../comment/queryComment.s",params).then(res=>{
							this.comment = res.data;
						});
						
						axios.post("../comment/getUser.s").then(res=>{
							this.user = res.data;
						});
					},
					methods : {
						insertComment(){
							/*js获取父界面的url start*/
							var url=getUrl();
							//获得文章uaid
							
							let cuaid = url.replace(/^.*\?uaid=(.+)$/, "$1");
							let cvid = url.replace(/^.*\?vid=(.+)$/, "$1");
							console.info("cuaid:"+cuaid);
							console.info("cvid:"+cvid);
							if( isNaN(cuaid)){
								//写cvid的获取
							}else{
								var params = new URLSearchParams();
								params.append("content",this.cn);
								params.append("cuaid",cuaid);
								//插入
								axios.post("../comment/insertCommment.s",params).then(res=>{
									if(res.data.code == 0){
										alert(res.data.msg);
									}
									this.cn = "";
									//获取comment表数据
									axios.post("../comment/queryComment.s",params).then(res=>{
										this.comment = res.data;
									});
								});		
							}
							
					},
					/* del(comment,coaccount){
						var url=getUrl();
						//获得文章uaid
						let cuaid = url.replace(/^.*\?uaid=(.+)$/, "$1");
						
						var params = new URLSearchParams();
						params.append("cuaid",cuaid);
						params.append("comment",comment);
						params.append("coaccount",coaccount);
						//删除
						axios.post("../comment/delCommment.s",params).then(res=>{
							//获取comment表数据
							axios.post("../comment/queryComment.s",params).then(res=>{
								this.comment = res.data;
							});
						});
					}, */
					dz(comment,coaccount,index){
						var url=getUrl();
						//获得文章uaid
						let cuaid = url.replace(/^.*\?uaid=(.+)$/, "$1");
						
						var params = new URLSearchParams();
						params.append("cuaid",cuaid);
						params.append("comment",comment);
						params.append("coaccount",coaccount);
						if(this.state == index){
							this.state = -1;
							//取消点赞
							axios.post("../comment/qxdzCommment.s",params).then(res=>{
								//获取comment表数据
								axios.post("../comment/queryComment.s",params).then(res=>{
									this.comment = res.data;
								});
							});
						}else{
							this.state = index;
							//点赞
							axios.post("../comment/dzCommment.s",params).then(res=>{
								//获取comment表数据
								axios.post("../comment/queryComment.s",params).then(res=>{
									this.comment = res.data;
								});
							});
						}
					},
					/* hf(name){
						//把他显示出来
						if(this.hf1 == 1){
							this.hf1 = 2;
						}else if(this.hf1 == 2){
							this.hf1 = 1;
						}
					},
					hfComment(comment,coaccount,cpraise){
						var url=getUrl();
						//获得文章uaid
						let cuaid = url.replace(/^.*\?uaid=(.+)$/, "$1");
						
						var params = new URLSearchParams();
						params.append("cuaid",cuaid);
						params.append("comment",comment);
						params.append("coaccount",coaccount);
						params.append("cpraise",cpraise);
					} */
				}
			})
			</script>
			
			<script type="text/javascript" src="../js/jquery-1.12.0.min.js"></script>
			<script type="text/javascript" src="../js/jquery.flexText.js"></script>
			<!--textarea高度自适应-->
			<script type="text/javascript">
			    $(function () {
			        $('.content').flexText();
			    });
			</script>
			<!--textarea限制字数-->
			<script type="text/javascript">
			    function keyUP(t){
			        var len = $(t).val().length;
			        if(len > 139){
			            $(t).val($(t).val().substring(0,140));
			        }
			    }
			</script>
		</div>
</body>
</html>